<template>
  <el-card class="form-container" shadow="never">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写商品信息"></el-step>
      <el-step title="填写商品促销"></el-step>
      <el-step title="填写商品属性"></el-step>
      <el-step title="选择商品关联"></el-step>
    </el-steps>
    <el-empty description="详情加载中" v-if="!flag" />
    <product-info-detail v-if="flag" v-show="showStatus[0]" v-model:value="productParam" :is-edit="props.isEdit" @nextStep="nextStep"> </product-info-detail>
    <product-sale-detail v-if="flag" v-show="showStatus[1]" v-model:value="productParam" :is-edit="props.isEdit" @nextStep="nextStep" @prevStep="prevStep"> </product-sale-detail>
    <product-attr-detail v-if="flag" v-show="showStatus[2]" v-model:value="productParam" :is-edit="props.isEdit" @nextStep="nextStep" @prevStep="prevStep"> </product-attr-detail>
    <product-relation-detail v-if="flag" v-show="showStatus[3]" v-model:value="productParam" :is-edit="props.isEdit" @prevStep="prevStep" @finishCommit="finishCommit"> </product-relation-detail>
  </el-card>
</template>
<script setup>
import ProductInfoDetail from '@/views/product/components/ProductInfoDetail.vue'
import ProductSaleDetail from '@/views/product/components/ProductSaleDetail.vue'
import ProductAttrDetail from '@/views/product/components/ProductAttrDetail.vue'
import ProductRelationDetail from '@/views/product/components/ProductRelationDetail.vue'
import { createProduct, getProduct, updateProduct } from '@/plugins/product'
import { reactive, ref, onBeforeMount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

const route = useRouter()

let productParam = reactive({
  albumPics: '',
  brandId: null,
  brandName: '',
  deleteStatus: 0,
  description: '',
  detailDesc: '',
  detailHtml: '',
  detailMobileHtml: '',
  detailTitle: '',
  feightTemplateId: 0,
  flashPromotionCount: 0,
  flashPromotionId: 0,
  flashPromotionPrice: 0,
  flashPromotionSort: 0,
  giftPoint: 0,
  giftGrowth: 0,
  id: 0,
  keywords: '',
  lowStock: 0,
  name: '',
  newStatus: 0,
  note: '',
  originalPrice: 0,
  pic: '',
  //会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
  memberPriceList: [],
  //商品满减
  productFullReductionList: [{ fullPrice: 0, reducePrice: 0 }],
  //商品阶梯价格
  productLadderList: [{ count: 0, discount: 0, price: 0 }],
  previewStatus: 0,
  price: 0,
  productAttributeCategoryId: null,
  //商品属性相关{productAttributeId: 0, value: ''}
  productAttributeValueList: [],
  //商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', spData: '', stock: 0}
  skuStockList: [],
  //商品相关专题{subjectId: 0}
  subjectProductRelationList: [],
  //商品相关优选{prefrenceAreaId: 0}
  prefrenceAreaProductRelationList: [],
  productCategoryId: null,
  productCategoryName: '',
  productSn: '',
  promotionEndTime: '',
  promotionPerLimit: 0,
  promotionPrice: null,
  promotionStartTime: '',
  promotionType: 0,
  publishStatus: 0,
  recommandStatus: 0,
  sale: 0,
  serviceIds: '',
  sort: 0,
  stock: 0,
  subTitle: '',
  unit: '',
  usePointLimit: 0,
  verifyStatus: 0,
  weight: 0
})

const active = ref(0)
const flag = ref(false)

const showStatus = reactive([true, false, false, false])

const props = defineProps({
  isEdit: {
    type: Boolean,
    default: false
  }
})

onBeforeMount(() => {
  if (props.isEdit) {
    getProduct(route.currentRoute.value.query.id).then(response => {
      productParam = response.data
      flag.value = true
    })
  }
})

function hideAll() {
  for (let i = 0; i < showStatus.length; i++) {
    showStatus[i] = false
  }
}

function prevStep(state) {
  if (active.value > 0 && active.value < showStatus.length) {
    active.value--
    hideAll()
    showStatus[active.value] = true
    productParam = state
  }
}

function nextStep(state) {
  if (active.value < showStatus.length - 1) {
    active.value++
    hideAll()
    showStatus[active.value] = true
    productParam = state
  }
}
function finishCommit(state) {
  console.log(state)
  ElMessageBox.confirm('是否要提交该产品', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    if (state.isEdit) {
      updateProduct(route.currentRoute.value.query.id, state).then(() => {
        ElMessage({
          type: 'success',
          message: '提交成功',
          duration: 1000
        })
        route.back()
      })
    } else {
      createProduct(state).then(() => {
        ElMessage({
          type: 'success',
          message: '提交成功',
          duration: 1000
        })
        location.reload()
      })
    }
  })
}
</script>

<style>
.form-container {
  width: 960px;
}
.form-inner-container {
  width: 800px;
}
</style>
